<template>
  <!-- 采购明细日志 -->
  <div class="purchase-item-log-wrap">
    <a-spin class="log-w" :loading="getLoading">
      <a-empty v-if="!logList.length" />
      <div class="log-item flex" v-for="(item, i) in logList" :key="i">
        <a-avatar :style="{ backgroundColor: '#3370ff' }" :size="24">{{ showShortName(item) }}</a-avatar>
        <div class="log-detail">
          <p>
            <span class="name">{{ item.createUname }}</span>
            <span class="time">{{ $setTime(item.gmtCreate) }}</span>
          </p>
          <p class="log">{{ item.eventName }}：{{ item.eventMsg }}</p>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { findPurchasePlanItemLogPage, findPurchaseItemLogPage } from '@/api/purchaseApplication'

  const props = defineProps({
    currentData: {
      type: Object,
      default: () => {},
    },
    source: {
      type: String,
      default: 'application',
    },
  })
  const logList = ref<Array<any>>([])
  const getLoading = ref(false)
  const apiMap = {
    application: findPurchasePlanItemLogPage,
    order: findPurchaseItemLogPage,
  }
  function showShortName(item: any) {
    return item.createUname?.substring(0, 1)
  }
  // 获取评论列表
  async function getLogtList() {
    if (!props.currentData.id) return
    getLoading.value = true
    let res: any = await apiMap[props.source]({
      billId: props.currentData.id,
      pageNum: 1,
      pageSize: 1000,
    })
    getLoading.value = false
    logList.value = res?.data?.records || []
  }
  getLogtList()
</script>

<style lang="less" scoped>
  .purchase-item-log-wrap {
    height: 100%;
    overflow: hidden;
    .log-w {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      .log-item {
        margin-top: 20px;
        .arco-avatar {
          flex-shrink: 0;
        }
        .log-detail {
          margin-left: 10px;
        }
        .time {
          margin-left: 10px;
          font-size: 12px;
          color: #999;
        }
        .log {
          margin-top: 5px;
          line-height: 20px;
          max-width: 600px;
        }
      }
    }
    .sent-log {
      width: 500px;
      margin-top: 20px;
    }
  }
</style>
